import React, { Component } from 'react';

// 导入actions
import {add_brand,add_brand_async,reset_brand_name} from '../redux/actions';
import { connect } from 'react-redux';

class Add extends Component {
    render() {
        return (
            <div className="form">
                   <div className="form-group">
                       <input value={this.props.brandName} onChange={this.inputChange.bind(this)} type="text" className="form-control" placeholder="请输入品牌名称"/>
                   </div>
                   <div className="form-group">
                       <button onClick={()=>this.addBrand()} className="btn btn-success">确认添加</button>
                   </div>
            </div>
        );
    }
    inputChange(event){
        this.props.reset_brand_name(event.target.value);
    }
    addBrand(){
        if(this.props.brandName.trim()===''){
            return alert('请输入品牌名称!');
        }
        // 手动构造品牌对象
        const data={
            name:this.props.brandName,
            ctime:parseInt(Date.now()/1000)
        }
        // 触发异步aciton:add_brand_async,完成品牌信息的添加
        this.props.add_brand_async(data);
        // 重置表单
        this.props.reset_brand_name('');
    }
}

export default connect(
    state=>({list:state.brands,brandName:state.brandName}),
    {
        add_brand,add_brand_async,reset_brand_name  
    }
)(Add);
